.my-courses {
  .stat-cards {
    margin-bottom: 20px;
  }
  
  .stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    .stat-content {
      display: flex;
      align-items: center;
      padding: 20px;
      
      .stat-icon {
        font-size: 48px;
        margin-right: 20px;
        
        .el-icon {
          background: linear-gradient(45deg, var(--el-color-primary), var(--el-color-success));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      
      .stat-info {
        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: var(--el-text-color-primary);
          margin-bottom: 5px;
        }
        
        .stat-label {
          font-size: 14px;
          color: var(--el-text-color-secondary);
        }
      }
    }
  }
  
  .course-list {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .course-detail {
      padding: 20px;
      background: rgba(255, 255, 255, 0.02);
    }
  }
  
  :deep(.el-table) {
    background-color: transparent;
    
    th, td {
      background-color: transparent;
      transition: background-color 0.3s ease;
    }
    
    th {
      color: var(--el-text-color-regular);
      font-weight: 600;
      background-color: rgba(255, 255, 255, 0.02);
    }
    
    td {
      color: var(--el-text-color-primary);
    }
    
    tr:hover > td {
      background-color: rgba(255, 255, 255, 0.05) !important;
    }
  }
  
  .score-excellent {
    color: #67C23A;
    font-weight: bold;
  }
  
  .score-good {
    color: #409EFF;
    font-weight: bold;
  }
  
  .score-pass {
    color: #E6A23C;
  }
  
  .score-fail {
    color: #F56C6C;
    font-weight: bold;
  }
} 